extends layout
block content
    #app
        h1 Hello App!
        p
            //- 使用 router-link 组件来导航, 通过传入 `to` 属性指定链接
            //- <router-link> 默认会被渲染成一个 `<a>` 标签
            router-link(to="/foo") Go to Foo
            router-link(to="/bar") Go to Bar
        router-view
        //- 路由出口, 路由匹配到的组件将渲染在这里
append scripts
    script.
        //- ================================================================
        // 0. 如果使用模块化机制编程, 導入 Vue 和 VueRouter, 要调用 Vue.use(VueRouter)
        // 1. 定义 (路由) 组件, 可以从其他文件 import 进来
        const Foo = {template: '<div>foo</div>'}
        const Bar = {template: '<div>bar</div>'}
        //- ================================================================
        // 2. 定义路由
        // 每个路由应该映射一个组件, 其中 "component" 可以是通过 Vue.extend() 创建的组件构造器, 或者, 只是一个组件配置对象.
        const routes = [{ path: '/foo', component: Foo },
                        { path: '/bar', component: Bar }]
        //- ================================================================
        // 3. 创建 router 实例, 然后传 `routes` 配置, 你还可以传别的配置参数, 不过先这么简单着吧
        const router = new VueRouter({ routes })  //  (缩写) 相当于 routes: routes
        //- ================================================================
        // 4. 创建和挂载根实例, 记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
        const app = new Vue({ router }).$mount('#app')
